<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网络商城</title>
    <link rel="stylesheet" href="../dist/css/index.css">
    <link rel="stylesheet" href="../dist/css/wangSang.css">
    <style>
        .dao a {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <!-- 导航 -->
        <div class="dao">
            <span><img src="./pic/logo.png" alt=""></span>
            <a href="">首页</a>
            <a href="wangShang.html">网络商城</a>
            <a href=" ">店铺信息</a>
            <a href="shenghuo.html">生活良品研究所</a>
            <a href="ziXun.html">问题咨询</a>
            <a href="">人才招聘</a>
            <a href="hezuo.html">店铺合作伙伴</a>
            <a href="">企业情报</a>
            <a href="">何为无印良品</a>
        </div>
        <!-- 小图标、登录注册 -->
        <div class="tubiao">
            <span><a href=""><img id="onepic" src="./pic/pic1.gif" alt="111"></a></span>
            <span><a href=""><img src="./pic/pic2.gif" alt=""></a></span>
            <span><a href=""></a><img src="./pic/pic3.gif" alt=""></span>
            <span><a href="03car.html"><img src="./pic/picar.gif" alt=""></a></span>
            <span><a href=""><img id="app" src="./pic/picapp.gif" alt=""></a></span>
            <span><img id="zhuce" src="./pic/piczhece.gif" alt=""></span>
        </div>
        <!-- 注册 -->
        <div class="zhucebox">
            <h3 class="guan">×</h3>
            <h3>登录</h3>
            <h3>商城账号</h3>
            <form class="myForm">
                <input class='inpDeng' type="text" name="user" placeholder='请输入手机号'>
                <br />
                <input class="inpMima" type="password" name="password" placeholder='请输入密码'>
                <br />
                <input type="button" id="denglu" name="user" value='登录'>
            </form>
            <span><a href="#" id="myA" class="newYonghu">新用户注册</a></span> <span><a id="myA" href="#">忘记密码</a>
                <p id="myP">如登录遇到异常，请联系客服电话 400-920-9299</p>
        </div>
        <!-- 登录box -->
        <div class="newzhuce">
            <span class="fanhui"><img src="./pic/fanhui.png" alt=""></span>
            <h3>注册</h3>
            <h3>商城账号</h3>
            <form class="myForm">
                <input type="text" id="zhuTel" name="user" placeholder='请输入手机号'>
                <br />
                <input type="text" id="zhuMima" name="user" placeholder='请输入验证码'><span id="yanzheng">发送验证码</span>
                <br />
                <input type="button" class="xiaYibu" id="denglu" name="user" value='下一步'>
            </form>
        </div>

        <!-- 内容板块（轮播）新到商品，衣服杂货 -->
        <div class='buy'>
            <!-- 广告图 -->
            <div class="bigPic">
                <img src="./pic/cotton19aw_pc.jpg" alt="">
            </div>
            <!-- 新到商品 -->
            <div class="xinpin">
                <h4>新到商品</h4>
                <div class="zuo"><img src="./pic/zuo.png" alt=""></div>
                <div class="yitu">
                    <img src="./pic/4549738540694_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4550002279868_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4549738540694_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4550002279868_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4549738540694_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4550002279868_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4549738540694_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4550002279868_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="yitu">
                    <img src="./pic/4549738540694_400.jpg" alt="">
                    <p>纯棉格子衬衫</p>
                    <p>￥159</p>
                </div>
                <div class="you"><img src="./pic/you.png" alt=""></div>
            </div>
            <!-- 灰色内容板块 -->
            <div class="hui">
                <!-- 衣服杂货 -->
                <h4>衣服杂货</h4>
                <div class="yifu">
                    <div><img src="./pic/smal01.png" alt=""><span>男装</span></div>
                    <div><img src="./pic/small02.png" alt=""><span>女装</span></div>
                    <div><img src="./pic/small03.png" alt=""><span>鞋袜</span></div>
                    <div><img src="./pic/small04.png" alt=""><span>男装</span></div>
                    <div><img src="./pic/smal01.png" alt=""><span>男装</span></div>
                    <div><img src="./pic/small02.png" alt=""><span>男装</span></div>

                </div>
                <!-- 生活杂货 -->
                <h4>生活杂货</h4>
                <div class="yifu">
                    <div><img src="./pic/smal01.png" alt=""><span>男装</span></div>
                    <div><img src="./pic/small03.png" alt=""><span>鞋袜</span></div>
                    <div><img src="./pic/small02.png" alt=""><span>女装</span></div>
                    <div><img src="./pic/small03.png" alt=""><span>鞋袜</span></div>
                </div>
                <!-- 食品 -->
                <h4>食品</h4>
                <div class="yifu">
                    <div><img src="./pic/smal01.png" alt=""><span>男装</span></div>
                    <div><img src="./pic/small02.png" alt=""><span>女装</span></div>
                </div>
                <span class="kong">111111</span>
            </div>
            <!-- 推荐商品 -->
            <h4>推荐商品</h4>
            <div class="tuipin">
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
                <div class="onehuo">
                    <img src="./pic/4548076316145_400.jpg" alt="">
                    <p>商品描述</p>
                    <p>￥49</p>
                </div>
            </div>
        </div>

</body>


<script src="../jquery-1.11.3.js"></script>
<script>
    // 点击注册登录box出现其他都消失，
    $('#zhuce').click(function () {
        $('.buy').css("display", "none")
        $('.tubiao').css("display", "none")
        $('.zhucebox').css("display", "block")
        //注册登录处向后，有新用户注册
        $('.newYonghu').click(function () {
            $('.newzhuce').css("display", "block")
            $('.zhucebox').css("display", "none")
            //返回键，返回登录页面
            $('.fanhui').click(function () {
                $('.newzhuce').css("display", "none")
                $('.zhucebox').css("display", "block")
            })
        })
        $('.guan').click(function () {
            $('.zhucebox').css("display", "none")
            $('.buy').css("display", "block")
            $('.tubiao').css("display", "block")
        })
    })
    //前端验证登录
    $('#denglu').click(function () {
        if (/^1\d{10}$/.test($('.inpDeng').val())) {//手机号码的判断
            alert("手机号正确")
            if (/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/.test($('.inpMima').val())) {//判断密码格式
                //5-20个以字母开头、可带数字、“_”、“.”的字串
                alert("密码格式正确")
                location.href = 'index.html'
            } else {
                alert("密码格式错误")
            }
        } else {
            alert("手机号或密码格式错误")
        }

    })
    //前端验证注册
    $('.xiaYibu').click(function () {
        if (/^1\d{10}$/.test($('#zhuTel').val())) {
            alert('手机号格式正确')
            if (/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/.test($('#zhuMima').val())) {
                alert('密码格式正确')
            }
        } else {
            alert('手机号或密码格式错误')
        }
    })



</script>

</html>